<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1573864_eb6ymv1fry.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2.16/lib/index.css">
    <link rel="stylesheet" href="../css/home.css">
</head>

<body>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2.16/lib/vant.min.js"></script>
    
    <script src="../js/SHA1.js"></script>
    <div id="container">
        <!--搜索框-->
        <div class="search">
            <van-search placeholder="请输入搜索关键词" show-action shape="round">
                <div slot="action">搜索</div>
            </van-search>
        </div>
        <!--搜索框结束-->
        <!--轮播图-->
        <div class="swipper">
            <van-swipe :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <img src="https://gdp.alicdn.com/imgextra/i3/851003831/O1CN01TauvyH1eAduCp70xQ_!!851003831.jpg" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="https://gdp.alicdn.com/imgextra/i2/134348404/O1CN01yi7ITQ2Bx57CQ24nL_!!134348404.jpg">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="https://gdp.alicdn.com/imgextra/i3/2828590752/O1CN011HQSJWaX6ntXTDX_!!2828590752.jpg">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="https://gdp.alicdn.com/imgextra/i3/513051429/O1CN01v0QGCr1MQWYUsdY9H_!!513051429.jpg">
                </van-swipe-item>
            </van-swipe>
        </div>
        <!--轮播图结束-->
        <!--中间分类栏-->
        <div class="classify">
            <ul>
                <li>
                    <a href="../html/jacket.html">
                        <span class="iconfont icon-jacket"></span>
                        <p>上衣</p>
                    </a>
                </li>
                <li>
                    <a href="../html/pants.html">
                        <span class="iconfont icon-pants"></span>
                        <p>裤子</p>
                    </a>
                </li>
                <li>
                    <a href="../html/skirt.html">
                        <span class="iconfont icon-skirt"></span>
                        <p>裙子</p>
                    </a>
                </li>
                <li>
                    <a href="../html/shoe.html">
                        <span class="iconfont icon-shoe"></span>
                        <p>鞋子</p>
                    </a>
                </li>
            </ul>
        </div>
        <!--中间分类栏结束-->
        <!--商品列表-->
        <div class="goods-list">
          
                <ul>
                    <li v-for="(good,index) in goodsList" v-on:click="jump(good)">
                        <img v-bind:src="good.thumbnail" alt="">
                        <p class="title">{{good.name}}</p>
                        <p class="price">
                            <span>￥{{good.price}}</span>
                            <em>￥{{good.originPrice}}</em>
                        </p>
                    </li>

                </ul>
           
        </div>
        <!--商品列表结束-->
        <!--底部导航-->
        <div class="tabbar">
            <ul>
                <li>
                    <a href="../html/home.html">
                        <span class="iconfont icon-home"></span>
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="../html/message.html">
                        <span class="iconfont icon-message"></span>
                        <p>消息</p>
                    </a>
                </li>
                <li>
                    <a href="../html/shoppingcart.html">
                        <span class="iconfont icon-shopping"></span>
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="../html/my.html">
                        <span class="iconfont icon-my"></span>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </div>
        <!--底部导航结束-->
    </div>

    <!-- 连接数据库，显示数据 -->
    <script>
        var now = Date.now();
        var appKey = SHA1("A6022604509435" + "UZ" + "A1EFE090-C505-B2A5-A468-BA148F436873" + "UZ" + now) + "." + now;
        var vm = new Vue({
            el: "#container",
            data: {
                goodsList: []
            },
            created: function () {
                this.getGoodList()
            },
            methods: {
                getGoodList: function () {
                    var _this = this;
                    axios.get('https://d.apicloud.com/mcm/api/ware', {
                        headers: {
                            'X-APICloud-AppId': 'A6022604509435',
                            'X-APICloud-AppKey': appKey
                        }
                    })
                        .then(function (response) {
                            _this.goodsList = response.data;
                            console.log(response.data);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });

                },
                jump:function(good){
                    window.location.href="detail.html?id="+good.id
                }

            },
        })
    </script>
    <!-- 连接数据库，显示数据 -->
</body>

</html>